<template>
<view style="padding-bottom: 1px;min-height: 100vh;">
	<view v-for="(item, index) in list">
		<uni-card :title="getdatatime(item.stopTime) + '的检查书'" :is-shadow="false" @click="cardClick(item, index, true, false)">
			<view class="content">
				<scroll-view style="height: 170rpx;width: 100%; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
					<view v-for="(item, index) in item.url?item.url.split(','):[]" :key="index" style="width: 170rpx; height: 170rpx;margin-right: 10px;float: left;">
						<image v-if="fileSuffixType(item) == 'image'" :src="item" @click="swClick(fileList, index)" class="rounded-1  mr-1" style="width: 100%;height: 100%;"></image>
						<image v-if="fileSuffixType(item) != 'image'" src="../../static/annex.png" @click="swClick(fileList, index)" class="rounded-1  mr-1" style="width: 100%;height: 100%;"></image>
					</view>
				</scroll-view>
			</view>
			<view class="card_bottom">
				<view class="card_bottom_view"><span class="card_bottom_span">结束时间:</span><span>{{ item.stopTime }}</span></view>
			</view>
		</uni-card>
	</view>
	<uni-card v-if="list.length == 0" :is-shadow="false">
		<image src="../../static/images/empty-image-default.png" style="width: 176px;height: 176px;margin-left: calc(50% - 88px);"></image>
		<view  style="width: 100%;text-align: center;color: #969799;font-size: 15px;">暂无数据</view>
	</uni-card>
	
	<uni-fab ref="fab"
	:content="uniFab.content"
	:horizontal="uniFab.horizontal"
	:vertical="uniFab.vertical"
	:direction="uniFab.direction"
	@trigger="trigger" />
</view>
</template>

<script>
import {getInspect} from "@/api/system/uniapp.js"
import {matchFileSuffixType} from "@/utils/fileSuffixTypeUtil.js"

export default {
	data() {
	    return {
			uniFab,
			list: [],
			siteNumber: null,
			total: 0,
			pageNum: 1,
	    }
	},
    onLoad: function() {
		this.siteNumber = uni.getStorageSync('siteNumber');
		this.getInspect()
	},
	onShow(){
		const _this = this
		uni.$on('addInspect',function(e){
			_this.list.push(e)
		})
	},
	methods:{
		getInspect(){
			getInspect({ siteNumber: this.siteNumber, pageNum: this.pageNum, pageSize: 10 }).then(res => {
				this.list = [...res.rows, ...this.list]
				this.total = res.total
			})
		},
		trigger(e){
			this.$tab.navigateTo(e.item.selectedIconPath)
		},
		cardClick(e, index) {
			
		},
		fileSuffixType(url){
			return matchFileSuffixType(url)
		},
		onReachBottom(){
			this.pageNum += 1
			if((this.pageNum-1)*10 >= this.total){
				return false
			}
			this.getInspect()
		},
		getdatatime(time, type) {
		  if (!time) {
			return "暂无数据";
		  }
		  if(typeof time == 'string'){
			time = time.replace(/-/g, '/');
		  }
		  const dt = new Date(time);
		  const y = dt.getFullYear();
		  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		  const d = (dt.getDate() + "").padStart(2, "0");
		  const hh = (dt.getHours() + "").padStart(2, "0");
		  const mm = (dt.getMinutes() + "").padStart(2, "0");
		  const ss = (dt.getSeconds() + "").padStart(2, "0");
		  return `${y}年${m}月${d}日`;
		}
	}
  }
  
  const uniFab = {
  	directionStr: '垂直',
  	horizontal: 'right',
  	vertical: 'bottom',
  	direction: 'horizontal',
  	content: [
  		{
  			iconPath: '/static/add.png',
  			selectedIconPath: '/pages/inspection/add',
  			text: '添加',
  			active: false
  		},
  	]
  }
</script>

<style lang="scss">
page{
    background-color: #f5f6f7;
}
.content{
	font-size: 16px;
	font-weight: 500;
	min-height: 45px;
	line-height: 45PX;
}
.card_bottom{
	border-top: 1px solid #F5F5F5;
	height: 30px;
	padding-top: 5px;
	margin-top: 5px;
}
.card_bottom_view{
	height: 20px;
	line-height: 20px;
	margin-right: 10px;
	float: left;
}
.card_bottom_span{
	font-weight: bold;
	font-size: 14px;
}
.reject_button{
	background-color: #ecf5ff;
	color: #409eff;
	border: 1px solid #b3d8ff;
	width: 150px;
	font-size: 14px;
	float: right;
}
.white_button{
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #dcdfe6;
	width: 150px;
	font-size: 14px;
	float: left;
}
.page {
	position: fixed;
	z-index: 6;
	color: #fff;
	bottom: 20rpx;
	text-align: center;
	width: 100%;
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	z-index: 5;
	> .my_swiper {
		width: 100%;
		height: 75vh;
		.bg_img {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position:center;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
